var React = require('react');
var token = $.cookie('token');
var mytoken = JSON.parse(token);

import {
    Button,
    Card,
    Col,
    Icon,
    Input,
    Modal,
    Row,
    Upload,
    notification,
} from 'antd';

const Dragger = Upload.Dragger;

const NewProductRecommendationManagement = React.createClass({
    change: function (value) {
        if ($('#'+value).val() == "") {
            notification.open({message: '操作提示', description: '请先填写商品编号', placement: 'bottomRight', type: 'error'});
        } else {
           
            var id= $('#'+value).val();
            this.setState({visible: true, newProductId: value,goodsId:id});
        }
    },

    getInitialState: function () {
        return {newProduct: [], visible: false, goodsId: 1, newProductId: -1}
    },
    componentWillMount: function () {
        var _this = this;
        $.ajax({
            type: "GET",
            url: "/api/Goods/GetNewProduct",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    _this.setState({newProduct: data});
                } else {
                    alert("新品推荐信息获取失败");
                }

            },
            error: function (msg) {
                alert(msg);
            }
        });
    },
    getNewProduct: function () {
        return this
            .state
            .newProduct
            .map(product => {
                return (
                    <Col span="8" key={product.Id}>
                        <Card
                            style={{
                            height: 200,
                            width: 340
                        }}
                            bodyStyle={{
                            padding: 0
                        }}>
                            <div className="custom-image">
                                <Input size="small" id={product.Id} placeholder="请输入商品编号"/>
                                <img
                                    alt="example"
                                    width="100%"
                                    src={product.Image}
                                    onClick={this
                                    .change
                                    .bind(this, product.Id)}/>
                            </div>
                        </Card>
                        <br/>
                    </Col>
                )
            })
    },

    showModal: function () {
        this.setState({visible: true});
    },
    handleOk: function () {
        this.setState({visible: false});
    },
    handleCancel: function () {
        this.setState({visible: false});
    },
    render() {
        var _this = this;
        const props = {
            name: 'file',
            multiple: true,
            showUploadList: false,
            action: '/api/Goods/ChangeNewProductRecommendation',
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            data: {
                newProductId: this.state.newProductId,
                goodsId: this.state.goodsId
            },
            onChange(info) {
                const status = info.file.status;
                if (status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (status === 'done') {
                    _this.setState({visible: false});
                    notification.open({message: '操作提示', description: '修改成功', placement: 'bottomRight', type: 'success'});
                } else if (status === 'error') {
                    _this.setState({visible: false});
                    notification.open({message: '操作提示', description: '修改失败,请核对您是否填写正确的商品编号！', placement: 'bottomRight', type: 'error'});
                }
            }
        };
        return (
            <div>
                <section className="content-header">
                    <h1>
                        后台管理
                        <small>新品推荐</small>
                    </h1>
                    <ol className="breadcrumb">
                        <li>
                            <a href="#">
                                <i className="fa fa-dashboard"></i>
                                Stage</a>
                        </li>
                        <li>
                            <a href="#">新品推荐</a>
                        </li>
                        <li className="active">概览</li>
                    </ol>
                </section>
                <br/>
                <div className="box">
                    <div className="box-header with-border">
                        <h3 className="box-title">新品推荐</h3>
                        <div className="box-tools pull-right">
                            <span className="label label-primary">填写信息</span>
                        </div>
                    </div>
                    <div className="box-body">
                        <div
                            style={{
                            padding: '30px'
                        }}>
                            <Row>{this.getNewProduct()}</Row>
                        </div>
                    </div>
                    <div className="box-footer">
                        <div>
                            <Modal
                                title="Basic Modal"
                                visible={this.state.visible}
                                onOk={this.handleOk}
                                onCancel={this.handleCancel}>

                                <div
                                    id="my-upload"
                                    style={{
                                    marginTop: 16,
                                    height: 180
                                }}>
                                    <Dragger {...props}>
                                        <p className="ant-upload-drag-icon">
                                            <Icon type="inbox"/>
                                        </p>
                                        <p className="ant-upload-text">上传展示图片</p>
                                        <p className="ant-upload-hint">请您尽量上传高清横版大图，请您在上传之前填写商品编号！</p>
                                    </Dragger>
                                </div>
                            </Modal>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = NewProductRecommendationManagement;